require(['./config'], () => {
    require(['template','header','footer','floatbar'], (template) => {
        class List {
            constructor(){
                this.guessTheHobby()
                this.renderProductShow()
                this.pageClickPrev()
                this.pageClickNext()
                this.sortList()
                this.state = {}
            }
            // 右侧猜你喜欢栏任务
            guessTheHobby(){
                // // 请求json ， 渲染ul
                // $.get('/libs/json/guessLovebar.json' , resp => {
                //     console.log(resp)
                //     // 根据数据渲染模板引擎
                //     // 第一个参数传模板引擎的id名（不用加引号）
                //     const str = template('guessYourLove', {
                //         guessLove : resp
                //     })
                //     // console.log(str)
                //     $('#sidebar-bottom').html(str)
                // })
                $.get('http://rap2api.taobao.org/app/mock/236205/list/likes', resp => {
                    if(resp.code === 200){
                        const{likes} = resp.body
                        
                        // { guessLove: likes} 前面是模板引擎的字段名，后面的是数据的变量名
                        $('#sidebar-bottom').html(template('guessYourLove',{ guessLove: likes}))
                    }
                })
            }
            // 列表页主内容
            renderProductShow() {
                var page = $('.productlistshowbBox').attr('page')
                $.get('http://rap2api.taobao.org/app/mock/236205/list/productshow', { page } ,resp => {
                    $('#productlist').html('')
                    if(resp.code === 200){
                        const { productShow = [] } = resp.body
                        const list = productShow.filter(item => {
                            return  100+(page-1)*10 && item.id < 100+page*10
                        })
                        console.log(list)
                        this.setState({ list }, () => {
                            var str = template('productlistshow',{ pList: list})
                            $('#productlist').html(str) 
                        })
                        $('#cp-count',).html(list.length)
                        $('#curr-page').html(page)
                        $('#commodityNum').html(list.length)
                        $('#curr-page1').html(page)
                    }
                })
            }
            // 页面点击切换
            pageClickPrev(){
                const _this = this
                $('#prev').on('click',function(){
                    let page = Number($('.productlistshowbBox').attr('page'))
                    if(page < 2){
                        page =1;
                        $('.productlistshowbBox').attr('page',page)
                    }else{
                        page = page - 1
                        $('.productlistshowbBox').attr('page',page)
                        _this.renderProductShow()
                    }
                    
                })
            }
            pageClickNext(){
                const _this = this
                $('#next').on('click',function(){
                    let page = Number($('.productlistshowbBox').attr('page'))
                    if(page > 4){
                        page =5;
                        $('.productlistshowbBox').attr('page',page)
                    }else{
                        page = page + 1
                        $('.productlistshowbBox').attr('page',page)
                        _this.renderProductShow()
                    }
                })
            }
            // 排序
            sortList(){
                // 升序
                $('#priceMoney-rise').on('click' , () => {
                    const { list = [] } = this.state;
                    list.sort((a, b) => a.price - b.price);
                    var str = template('productlistshow',{ pList: list})
                    $('#productlist').html(str)
                })
                // 降序
                $('#priceMoney-lower').on('click' , () => {
                    const { list = [] } = this.state;
                    list.sort((a, b) => b.price - a.price);
                    var str = template('productlistshow',{ pList: list})
                    $('#productlist').html(str)
                })
            }
            setState(state, callback) {
                this.state = {...this.state, ...state};
                callback && callback();
            }
        }
        new List()
    })
})